import React from 'react'
import { Row, Col } from 'antd';
import WordList from 'src/components/WordList';
import WordSearcher from 'src/components/WordSearcher';
import WordInfo from 'src/components/WordInfo'
import WordSentence from 'src/components/WordSentence';
import WordSource from 'src/components/WordSource';
import styles from './style.module.scss'
import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';

const WordBase = () => {
    const screens = useBreakpoint()
    let cls = styles.flowSmall
    if (screens.lg)
        cls = styles.flowBig
    return (
        <Row gutter={[16, 16]} className={styles.warpper}>
            <Col xl={12} lg={8} md={24} sm={24} xs={24}>
                <div className={cls}>
                    <Row gutter={[16, 16]} >
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Row gutter={[16, 16]} >
                                <Col span={24}>
                                    <WordSearcher />
                                </Col>
                            </Row>
                            <Row gutter={[16, 16]}>
                                <Col span={24}>
                                    <WordSource />
                                </Col>
                            </Row>
                        </Col>
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <WordList />
                        </Col>
                    </Row>
                </div>
            </Col>
            <Col xl={12} lg={16} md={24} sm={24} xs={24}>
                <div className={cls}>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <WordInfo />
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <WordSentence />
                        </Col>
                    </Row>
                </div>
            </Col>
        </Row >
    )
}

export default WordBase;